import React, {useEffect, useState} from 'react';
import {PageContainer} from "@ant-design/pro-components";
import {Card, Descriptions, message, Tabs} from 'antd';
import type { DescriptionsProps  } from 'antd';
import {useParams} from "react-router";
import {getInterfaceInfoVoByIdUsingGet} from "@/services/yuanapi_backed/interfaceInfoController";
import Tab1 from "@/pages/InterfaceDetail/components/Tab1";

const InterfaceDetail : React.FC= () => {
  const [loading,setLoading] = useState<boolean>(false)
  const [descriptionsData,setDescriptionsData] = useState<any>({})
  // 获取当前路由参数
  const { id } = useParams();
  // 定义获取当前接口详情
  const getData = async (id:string)=>{
  try {
    const res = await getInterfaceInfoVoByIdUsingGet({id: id});
    console.log(res)
    if (res.code === 0){
      setDescriptionsData(res.data)
      setLoading(false)
    }
  }catch (e:any){
    message.error(e.message)
  }
  }
  useEffect(() => {
    // @ts-ignore
    getData(id)
  }, []);
  const items: DescriptionsProps['items'] = [
    {

      label: '接口地址',
      children: descriptionsData.url,
    },
    {
      label: '返回格式',
      children: "JSON",
    },
    {
      label: '消费积分',
      children: "1",
    },
    {
      label: '请求方式',
      children: descriptionsData.requestMethod
    },
    {
      label: '调用总次数',
      span: { xl: 2, xxl: 2 },
      children: descriptionsData.calledNum,
    },
    {
      label: '接口状态',
      span: { xl: 2, xxl: 2 },
      children: descriptionsData.status === 0 ? "未发布":"已下线",
    },
    {
      label: '接口描述',
      span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
      children: (
          descriptionsData.description
      ),
    },
    {
      label: '请求示例',
      span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
      children: (
      descriptionsData. requestExample
      ),
    },
  ];

  const TabsItem :any = [
    {
      key:1,
      label: '🗃️Api文档',
      children:<Tab1></Tab1>
    },
    {
      key:2,
      label: '⚙️在线调试工具',
      children:"tab2"
    },
    {
      key:3,
      label: '❗错误码参照',
      children:"tab3"
    },
    {
      key:4,
      label: '📰示例代码',
      children:"tab4"
    }
  ]
  return (
    <PageContainer
      content="您可以详细查看该接口的信息 "

    >
      <Card
        hoverable = {true}
        loading={loading}
      >
      <Descriptions
        title={descriptionsData.interfaceName}
        contentStyle={{ color: '#1677ff' }}
        bordered
        column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
        items={items}
      />

      </Card >
      <Card
        hoverable
        loading={loading}
        style={{
          marginTop:30,
        }}

      >
        <Tabs
          defaultActiveKey="1"
          type="card"
          size={"large"}
          items={
            TabsItem
          }
        />
      </Card >
    </PageContainer>
  );
};

export default InterfaceDetail;
